<%@ page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory" %>
<%@ page import="com.google.appengine.api.blobstore.BlobstoreService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%
    BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
	UserService userService = UserServiceFactory.getUserService();
	User user = userService.getCurrentUser();
%>
<%@include file="includes/header.jsp" %>

<style type="text/css">
#map_canvas {
	height: 50px
}
</style>
<!-- if not logged in -->
<% if(user==null){ %>
<p>Please <a href="<%= userService.createLoginURL(request.getRequestURI()) %>">sign in</a></p>
<% }else{%>
<!-- if logged in -->
<!-- upload form -->
     	<form action="<%= blobstoreService.createUploadUrl("/upload") %>" method="post" enctype="multipart/form-data">
			<fieldset>
				<div id="map_canvas" style="width: 300px; height: 300px;"></div>
				<input id="lng" type="hidden" name="longitude">
				<input id="lat" type="hidden" name="latitude">
				<label>user</label> 
				<input type="text" name="email" value="<%= user.getEmail() %>" readonly="readonly"> 
				<label>title</label> 
				<input type="text" name="title"> 
				<label>text</label>
				<textarea rows="3" name="text"></textarea>
				<label>image</label>
				<input type="file" name="image">
				<hr/>
				<button type="submit" class="btn">Submit</button>
			</fieldset>
		</form>
		
	<div class="footer">
		<p>&copy; Manuel Spierenburg &amp; Filippo Monte 2012</p>
   	</div>
    </div> <!-- /container -->
    <!-- javascript -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
	var leiden = new google.maps.LatLng(52.166141, 4.481564);
	var marker;
	var map;
	var geocoder;

	function initialize() {
		var mapOptions = {
			zoom : 15,
			mapTypeId : google.maps.MapTypeId.ROADMAP,
			center: leiden
		};

		geocoder = new google.maps.Geocoder();
		map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

		marker = new google.maps.Marker({
			map : map,
			draggable : true,
			animation : google.maps.Animation.DROP,
			position: leiden
		});
		google.maps.event.addListener(marker, 'click', toggleBounce);
		google.maps.event.addListener(marker, 'dragend', setLatLong);
	}

	function toggleBounce() {
		if (marker.getAnimation() != null) {
			marker.setAnimation(null);
		} else {
			marker.setAnimation(google.maps.Animation.BOUNCE);
		}
	}

	function setLatLong() {
		$('#lng').val(marker.position.lng());
		$('#lat').val(marker.position.lat());
	}

	$(document).ready(function() {
		initialize();
	});
	</script>
<% } %>
<!-- end if logged in -->
  </body>
</html>